<template>
  <nav class="nav-bar">
    <router-link to="/home" class="nav-item">
      <i class="iconfont icon-home"></i>
      <span>首页</span>
    </router-link>
    <router-link to="/category" class="nav-item">
      <i class="iconfont icon-category"></i>
      <span>分类</span>
    </router-link>
    <router-link to="/profile" class="nav-item">
      <i class="iconfont icon-user"></i>
      <span>我的</span>
    </router-link>
  </nav>
</template>

<script setup>
// 组件逻辑
</script>

<style scoped>
.nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #666;
  font-size: 12px;
}

.nav-item i {
  font-size: 20px;
  margin-bottom: 2px;
}

.nav-item.router-link-active {
  color: #007AFF;
}
</style>
